<template>
    <div id="headlinks">
        <div class="pandding">
            <div class="text">
                <h2>Links / 友情链接</h2>
                <div class="links">
                    <a v-for="linked in links" v-bind:key="linked.name" :href="linked.link" target="_blank">
                        <div class="link">
                            <img class="headimg" v-bind:src="linked.headimg">
                            <div class="name">{{linked.name}}</div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
#headlinks {
  padding-top: 10vh;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 5vh;
  width: 90%;
  height: 90vh;
  .pandding {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    .text {
      padding: 5vh 5%;
      .links {
        margin-top: 5vh;
        a {
          color: #000000;
        }
      }
      .link {
        float: left;
        box-sizing: inherit;
        width: 25%;
        @media (max-width: 640px) {
          width: 90%;
        }
        padding: 10px;
        .headimg {
          width: 50px;
          float: left;
        }
        .name {
          padding-left: 10px;
          float: left;
        }
      }
      .link:hover {
        background-color: rgba($color: #000000, $alpha: 0.2);
        transform: translateY(-5px);
        opacity: 1;
        border-radius: 5px;
        box-shadow: 0 3px 20px rgba(0, 0, 0, 0.28);
        transition: 0.13s linear;
      }
    }
  }
}
</style>
<script>
import sylingdheadimg from "../assets/links/headimg/sylingd.jpg";
import shimmerlogo from "../assets/links/headimg/shimmer.jpg";
import nekotoraheadimg from "../assets/links/headimg/nekotora.jpg"

export default {
  data() {
    return {
      links: [
        {
          name: "微光工作室",
          link: "https://shimmer.neusoft.edu.cn",
          headimg: shimmerlogo
        },
        {
          name: "泷涯",
          link: "https://blog.sylingd.com",
          headimg: sylingdheadimg
        },{
          name: "哞菇",
          link: "http://flag.moe/",
          headimg: nekotoraheadimg
        }
      ]
    };
  }
};
</script>

